<template>
	<div id="loading">
		<div class="box">
			<div class="v-html" v-html="loading[index]" v-if="isHtml"></div>
			<div class="v-text" v-text="loading[index]" v-else></div>
			<div></div>
		</div>
		<div class="btn">
			<div class="change-btn" @click="changeShow">
				{{ isHtml ? "查看源码" : "查看示例" }}
			</div>
			<div class="loading-btn">
				<div class="loading-btn-item" @click="index = 0">1</div>
				<div class="loading-btn-item" @click="index = 1">2</div>
				<div class="loading-btn-item" @click="index = 2">3</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { ref } from "vue"
	import "../assets/css/loading.css"
	export default {
		setup() {
			const index = ref(0)
			const loading = [
				`<div class="sk-chase">
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
					<div class="sk-chase-dot"></div>
				</div>`,
				`<div class="spinner">
					<div class="rect1"></div>
					<div class="rect2"></div>
					<div class="rect3"></div>
					<div class="rect4"></div>
					<div class="rect5"></div>
				</div>`,
				`<div class="sk-cube-grid">
					<div class="sk-cube sk-cube1"></div>
					<div class="sk-cube sk-cube2"></div>
					<div class="sk-cube sk-cube3"></div>
					<div class="sk-cube sk-cube4"></div>
					<div class="sk-cube sk-cube5"></div>
					<div class="sk-cube sk-cube6"></div>
					<div class="sk-cube sk-cube7"></div>
					<div class="sk-cube sk-cube8"></div>
					<div class="sk-cube sk-cube9"></div>
				</div>`,
			]
			const isHtml = ref(true)
			const changeShow = () => {
				isHtml.value = !isHtml.value
			}
			return {
				index,
				loading,
				isHtml,
				changeShow,
			}
		},
	}
</script>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	#loading {
		width: 100%;
		height: 100vh;
		background: linear-gradient(to right, #7474bf, #348ac7);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.box {
		width: 400px;
		height: 350px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box .v-text {
		width: 100%;
		height: 100%;
	}

	.btn {
		width: 200px;
		height: 150px;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		user-select: none;
	}

	.btn .loading-btn {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.btn .loading-btn .loading-btn-item {
		width: 35px;
		height: 35px;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 50%;
		text-align: center;
		line-height: 35px;
		cursor: pointer;
	}

	.btn .change-btn {
		width: 100px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.2);
		cursor: pointer;
		border-radius: 20px;
		font-size: 13px;
		letter-spacing: 2px;
	}
</style>
